<template>
	<view class="container_bar">

		<uni-section style="margin-bottom: 3px; ">
			<view class="box-bg">
				<view class="box_top">
					<view class="logo">
						<image src="../static/tfLogo.png" mode=""></image>
						<image class="zscy" src="../static/zhenshicheyuan.bb99b2a6.jpg" mode=""></image>
					</view>
					<view class="box_title">
						<view :class="i == count ? 'item confirm' : 'item'" v-for="item,i in titels" @:click="skip(i)">
							{{item}}
						</view>
					</view>
				</view>

				<view class="box_sousuo" v-show=" count != 3 && count != 4 ">
					<view class="location" @:click="jump">
						<uni-icons class="input-uni-icon" type="location" size="18" color="#999" />
						<text class="bar-text">{{ city }}</text>
					</view>
					<view class="input-view">
						<uni-icons class="input-uni-icon" type="search" size="18" color="#999" />
						<input confirm-type="search" class="nav-bar-input" type="text" :value="value"
							placeholder="搜索品牌.车型" @confirm="confirm" />
					</view>
				</view>

			</view>
		</uni-section>
	</view>
	<view class="" style="height: 200rpx; ">

	</view>
</template>

<script setup>
	import {
		ref,
		reactive
	} from "vue"
	import {
		onLoad
	} from '@dcloudio/uni-app';
	const titels = reactive(["首页", "二手车", "新车", "买车", "腾发服务"])
	const count = ref();
	const city = ref("全国");
	const value = ref("");
	
	onLoad(()=>{
		console.log("第一次");
		count.value = getApp().globalData.index;
	})
	


	const skip = (i)=> {
		console.log(i,getApp().globalData.index);
		count.value = getApp().globalData.index;
		getApp().globalData.index = i;
		if(i == 0) {
			uni.switchTab({
				url: '../../pages/index/index'
			});
		}else if(i == 1) {
			uni.switchTab({
				url: '../../pages/used/used'
			});
		}else if(i == 2) {
			uni.switchTab({
				url: '../../pages/newCar/newCar'
			});
		}else if(i == 3) {
			uni.switchTab({
				url: '../../pages/sellCar/sellCar'
			});
		}else if(i == 4) {
			uni.switchTab({
				url: '../../pages/serve/serve'
			});
		}
	};
	
	const jump =()=>{
		
		console.log("点击了");
		uni.navigateTo({
			url: '../../pages/location/location'
		});
	}
</script>

<style lang="scss">
	$nav-height: 30px;

	.container_bar {
		position: fixed;
		top: 0;
		left: 0;
		z-index: 100;
	}

	.box-bg {
		background-color: #F5F5F5;
		// padding: 5px 0;
	}

	.box-bg .box_top {
		display: flex;
		width: 750rpx;
		height: 100rpx;
		background-color: #fff;
		// border: 1px solid;
	}

	.box-bg .box_top .logo {
		width: 150rpx;
		height: 90rpx;
		text-align: center;
		box-shadow: 5rpx 5rpx 15rpx #d6d6d6;
		line-height: 60rpx;
		padding-top: 8rpx;
		background-color: #fff;
	}

	.box-bg .box_top .logo image {
		width: 100rpx;
		height: 40rpx;
		vertical-align: middle;
	}

	.box-bg .box_top .logo image.zscy {
		display: block;
		margin: 0 auto;
		width: 80rpx;
		height: 18rpx;
	}

	.box-bg .box_top .box_title {
		display: flex;
		justify-content: space-around;
		align-items: center;
		width: 500rpx;
		height: 100rpx;
		font-size: 10rpx;
	}

	.box-bg .box_top .box_title .item {
		padding: 10rpx 0rpx;
		border-bottom: 2px solid #fff;
	}

	.box-bg .box_top .box_title .item.confirm {
		color: #2969ff;
		border-bottom: 2px solid #2969ff;
	}

	.box-bg .box_sousuo {
		display: flex;
		justify-content: center;
		align-items: center;
		width: 750rpx;
		height: 100rpx;
		border-top: 1px solid #ededed;
		border-bottom: 1px solid #ededed;
		background-color: #fff;
	}

	.box-bg .box_sousuo .location {
		display: flex;
		justify-content: center;
		align-items: center;
		width: 140rpx;
		font-size: 10rpx;
		color: #999;
	}

	.city {
		/* #ifndef APP-PLUS-NVUE */
		display: flex;
		/* #endif */
		// flex-direction: row;
		align-items: center;
		justify-content: flex-start;
		// width: 160rpx;
		margin-left: -15px;
	}

	.city image {
		width: 60rpx;
		height: 40rpx;
	}

	.input-view {
		/* #ifndef APP-PLUS-NVUE */

		display: flex;
		/* #endif */
		width: 500rpx;
		// flex-direction: row;
		// width: 500rpx;
		// flex: 1;
		background-color: #f8f8f8;
		height: $nav-height;
		border-radius: 15px;
		padding: 0 0 0 155rpx;
		flex-wrap: nowrap;
		margin: 7px 15rpx;
		line-height: $nav-height;
	}

	.input-uni-icon {
		line-height: $nav-height;
	}

	.nav-bar-input {
		height: $nav-height;
		line-height: $nav-height;
		/* #ifdef APP-PLUS-NVUE */
		width: 370rpx;
		/* #endif */
		padding: 0 5px;
		font-size: 12px;
		background-color: #f8f8f8;
	}
</style>